<template lang="pug">
.page
  .CustomerInformation
    //- 查询框
    .search-form
      Row(type="flex" justify="start" :gutter="16")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 客户名称：
          Input(v-model="name"  placeholder="请输入客户名称" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 合作类型：
          Select(v-model="cooperateType" placeholder="请选择合作类型" clearable)
            Option(v-for="(item, index) in cooperateType_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 合作关系：
          Select(v-model="cooperateStatus"  placeholder="请选择合作关系" clearable)
            Option(v-for="(item, index) in cooperateStatuseType_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 参保地区：
          Cascader(v-model="areaName" placeholder="请选择参保地区" :filterable="true" :data="areaArr" :change-on-select="true" :load-data="loadDataCity" style="flex:1;")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 所属客服：
          Select(v-model="serverId" placeholder="请选择所属客服" filterable clearable multiple)
            Option(v-for="(item, index) in serverId_arr" :value="item.key" :key="index") {{ item.value }}
        //- Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
        //-   span.label-txt.w120 营业执照是否上传：
        //-   RadioGroup.beautiful-radio-group.ml-10(type="button" v-model="licenseRadio" @on-change="isLicenseUploadedChange")
        //-     Radio(:label="-1") 全部
        //-     Radio(:label="1") 是
        //-     Radio(:label="0") 否
        //- Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
        //-   span.label-txt.w110 合同是否上传：
        //-   RadioGroup.beautiful-radio-group.ml-10(type="button" v-model="contractRadio" @on-change="isContractUploadedChange")
        //-     Radio(:label="-1") 全部
        //-     Radio(:label="1") 是
        //-     Radio(:label="0") 否
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w110 合同到期：
          Input(type="number" v-model="contractWillBeExpiredDays" clearable placeholder="请输入")
          span.unit.ml-5 天
          Button.ml-15(v-if="hasFind" type="info" @click="query") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :loading="loading" @on-selection-change="onSelectChange" :stripe="true")
        ._table_header(slot="header")
          .table-title-lefttxt.pull-left
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
              | 家企业
            Divider(type="vertical")
            span.leftText
              | 正常合作:
              span.text-info.pl-5.pr-5.font-weight {{cooperatingCount}}
              | 家企业
            Divider(type="vertical")
            span.leftText
              | 已停止合作:
              span.text-info.pl-5.pr-5.font-weight {{stopedCount}}
              | 家企业
            Divider(type="vertical")
            span.leftText
              | 在职:
              span.text-info.pl-5.pr-5.font-weight {{behring}}
              | 人
            Divider(type="vertical")
            span.leftText
              | 服务费:
              span.text-info.pl-5.pr-5.font-weight {{feeAmt}}
              | 元
          .pull-right.table-title-btns
            i-button.mr-10(v-if="hasCreate" type="info" @click="creatOpen") 新增
            i-button.mr-10(v-if="hasExport" type="info" @click="exportCustomers") 导出
            i-button.mr-10(v-if="hasReassignServer" type="warning" @click="unitDepartureClick") 单位调离
        template(slot-scope="{ row, index }" slot="operation")
          Button.mr-10(type="text" size="small" @click="goEmployeeBookList(row)") 花名册
          Button.mr-10(v-if="hasDetail" type="text" size="small" @click="gotoDetail(row.id)") 详情

          Button.mr-10(v-if="hasResumeCooperate && row.status === '终止合作'" type="text" size="small" @click="openResumeCooperate(row.id)" ) 恢复合作
          Button.mr-10(v-if="hasTerminateContract && row.status === '正常合作'" type="text" size="small" @click="openStopCooperate(row.id)" ) 终止合作

          Button.mr-10(v-if="hasGenerateQRCode" type="text" size="small" @click="handleShowErweimaModal(row)") 生成二维码
        ._table_footer(slot="footer")
          //- span 共{{totalRows}}条
          template
            Page(class="_page" :total="totalRows" :current="pageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" @on-page-size-change="onpageSizeChange" show-sizer show-total :page-size-opts="[10, 20, 30, 50, 100]")
    //- 单位调离
    Exchange(
      :show="unitDepartureModalShow" 
      :customerIds="customerIds"
      :serverId_arr="serverId_arr"
      :customerNames="customerNames"
      @get-list="getListData();unitDepartureModalShow=false"
      @on-cancel="unitDepartureModalShow = false"
    )
    //- 终止合同
    StopCooperate(
      :show="stopCooperateModalShow" 
      :handleId="handleId"
      @get-list="getListData();stopCooperateModalShow=false"
      @on-cancel="stopCooperateModalShow = false"
    )
    //- 恢复合作
    Renew(
      :show="resumeCooperateModalShow" 
      :handleId="handleId"
      :contractCode="contractCode"
      @get-list="getListData();resumeCooperateModalShow = false;contractCode=''"
      @on-cancel="resumeCooperateModalShow = false"
    )
    //- 新增公司
    createCostomer(
      :show="createModalShow" 
      
      :customerSocso_arr="customerSocso_arr"
      :customerCfc_arr="customerCfc_arr"
      :customerCi_arr="customerCi_arr"
      :customerServicefee_arr="customerServicefee_arr"
      @get-list="getListData();createModalShow=false"
      @on-cancel="createModalShow = false"
    )
    //- 入职二维码
    ErweimaModal(ref="ErweimaModal")
</template>

<script>
import { CustomerThead } from './../tableHead.js'
import { Common } from '@/utils/common.js'
import dataApi from '@/api/data.js'
import systemApi from '@/api/system.js'
import _cloneDeep from 'clone-deep'

import createCostomer from './create/index.vue'


import Renew from './modal/renew.vue'
import StopCooperate from './modal/stopCooperate.vue'
import Exchange from './modal/exchange.vue'
import ErweimaModal from './modal/erweima.vue'

export default {
  name: 'customerInformation',
  // mixins: [Mixin],
  components: {
    createCostomer,
    Renew,
    StopCooperate,
    Exchange,
    ErweimaModal
  },
  provide() {
    return {
      getSuperCompanyIdArr: this.getSuperCompanyIdArr,
      getCooperateStatuseTypeArr: this.getCooperateStatuseTypeArr,
      getXooperateTypeArr: this.getXooperateTypeArr,
      getCustomerCategoryArr: this.getCustomerCategoryArr,
      getCustomerCharacterArr: this.getCustomerCharacterArr,
      getAreaArr: this.getAreaArr,
      getServerArr: this.getServerArr,
      getCustomerTaxpayertypeArr: this.getCustomerTaxpayertypeArr,
      getInvoicetypeArr: this.getInvoicetypeArr,
      getSizeArr: this.getSizeArr,
      getCompanyTypeArr: this.getCompanyTypeArr,
      getBusinesstypeArr: this.getBusinesstypeArr,
      getSigningCompany: this.getSigningCompany,
      getDepartment: this.getDepartment,
      getRegion: this.getRegion,
      getSales: this.getSales,
    }
  },
  data () {
    return {
      createModalShow: false, // 新增弹窗

      unitList: [], // 申报单位数组
      unitId: '', // 默认申报单位id

      createModal: false,
      contractWillBeExpiredDays: '', // 是否是一个月到期
      loading: false,
      areaArr: [], // 区域数组
      customerIds: '', // 客户ID合集
      customerNames: '', // 客户姓名合集
      unitDepartureModalShow: false, // 单位调离模态窗
      stopCooperateModalShow: false, // 终止合作模态窗
      resumeCooperateModalShow: false, // 恢复合作模态
      // 表头
      thead: _cloneDeep(CustomerThead),
      // 统计数据信息
      countInfo: null,
      licenseRadio: -1,
      contractRadio: -1,
      isLicenseUploaded: '', // 营业执照是否已上传
      isContractUploaded: '', // 合同是否已上传
      // 列表数据
      tableData: [],
      selectId: '', // table选择的id
      cooperateType_arr: [], // 合作类型
      cooperateType: '', // 合作类型值
      cooperateStatuseType_arr: [], // 合作状态
      cooperateStatus: '', // 合作状态值
      serverId_arr: [], // 所属客服
      serverId: '', // 查询所属客服值

      handleId: '', // 恢复和终止操作时的客户id
      // 恢复合作
      contractCode: '', // 合同编号
      
      name: '', // 客户名称
      areaName: [], // 参保地区

      pageIndex: 1, // 页码page
      pageSize: 10, // 页面条数
      totalRows: 0, // 总条数

      cooperatingCount: 0, // 正常合作
      stopedCount: 0, // 停止合作
      behring: 0, // 在职
      feeAmt: 0, // 服务费
      // 
      filtrate: {
        areaName: ''
      },
      // 下拉选项
      superCompanyId_arr: [], // 上级公司
      customerCategory_arr: [], // 客户分类
      customerCharacter_arr: [], // 客户性质
      customerTaxpayertype_arr: [], // 纳税人性质
      invoicetype_arr: [], // 发票种类
      size_arr: [], // 公司规模
      companytype_arr: [], // 公司类型
      businesstype_arr: [], // 所属行业
      customerSocso_arr: [], // 社保收取方式
      customerCfc_arr: [], // 公积金收取方式
      customerCi_arr: [], // 商保收取方式
      customerServicefee_arr: [], // 服务费收取方式
      
      signingCompany_arr: [], // 签单公司
      department_arr: [], // 所属部门
      region_arr: [], // 所属区域
      sales_arr: [], // 所属销售
    }
  },
  watch: {
    $route (to, from) {
      if (from.name === 'home') {
        this.initPage()
      }
    }
  },
  created () {
    this.initPage()
    this.getEnum()
    this.getProvince()
    this.serverDown()
    this.getUnitList()
    this.getCompany()
    this.getSelectIdListSigningCompany()
    this.getSelectIdListDepartment()
    this.getSelectIdListRegion()
    this.getSelectIdListSales()
    // this.getSelectIdList('Department', this.department_arr)
    // this.getSelectIdList('Region', this.region_arr)
    // this.getSelectIdList('Sales', this.sales_arr)
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 导出
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
    // 终止合作
    hasTerminateContract () {
      return this.actionArr.indexOf('TerminateContract') > -1
    },
    // 恢复合作
    hasResumeCooperate () {
      return this.actionArr.indexOf('ResumeCooperate') > -1
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 新增
    hasCreate () {
      return this.actionArr.indexOf('Create') > -1
    },
    // 单位调离
    hasReassignServer () {
      return this.actionArr.indexOf('ReassignServer') > -1
    },
    // 详情
    hasDetail () {
      return this.actionArr.indexOf('Detail') > -1
    },
    // 生成二维码
    hasGenerateQRCode () {
      return this.actionArr.indexOf('GenerateQRCode') > -1
    }
  },
  methods: {
    getSuperCompanyIdArr () {
      return this.superCompanyId_arr
    },
    getCooperateStatuseTypeArr () {
      return this.cooperateStatuseType_arr
    },
    getXooperateTypeArr () {
      return this.cooperateType_arr
    },
    getCustomerCategoryArr () {
      return this.customerCategory_arr
    },
    getCustomerCharacterArr () {
      return this.customerCharacter_arr
    },
    getAreaArr () {
      return this.areaArr
    },
    getServerArr () {
      return this.serverId_arr
    },
    getCustomerTaxpayertypeArr () {
      return this.customerTaxpayertype_arr
    },
    // 发票种类
    getInvoicetypeArr () {
      return this.invoicetype_arr
    },
    // 公司规模
    getSizeArr () {
      return this.size_arr
    },
    // 公司类型
    getCompanyTypeArr () {
      return this.companytype_arr
    },
    // 所属行业
    getBusinesstypeArr () {
      return this.businesstype_arr
    },
    // 签单公司
    getSigningCompany () {
      return this.signingCompany_arr
    },
    // 所属部门
    getDepartment () {
      return this.department_arr
    },
    // 所属区域
    getRegion () {
      return this.region_arr
    },
    // 所属销售
    getSales () {
      return this.sales_arr
    },
    // 获取上级公司
    getCompany () {
      dataApi.postCompanys({
        PageIndex: 1,
        PageSize: 10000
      }).then((res) => {
        this.superCompanyId_arr = res.data[0].items
      })
    },
    // 初始化页面
    initPage () {
      console.log('⭐ this.$route.params: ', this.$route.params)
      this.filtrate.areaName = this.$route.params.areaName // 城市名称
      if (this.$route.params.status && !this.$route.params.type) {
        console.log('###1')
        this.contractWillBeExpiredDays = ''
        this.cooperateStatus = this.$route.params.status
        this.cooperateType = ''
        this.getListData()
        return false
      } else if (this.$route.params.type && !this.$route.params.status) {
        console.log('###2')
        this.contractWillBeExpiredDays = ''
        this.cooperateType = this.$route.params.type
        this.getListData()
        return false
      } else if (this.$route.params.type && this.$route.params.status) {
        console.log('###3')
        this.contractWillBeExpiredDays = ''
        this.cooperateStatus = this.$route.params.status
        this.cooperateType = this.$route.params.type
        this.getListData()
        return false
      } else if (this.$route.params.isDue) {
        console.log('###4')
        this.cooperateType = ''
        this.cooperateStatus = ''
        this.contractWillBeExpiredDays = 60
        this.getListData()
        return false
      } else {
        console.log('###5')
        this.contractWillBeExpiredDays = ''
        this.cooperateType = ''
        this.cooperateStatus = ''
        this.getListData()
        return false
      }
    },
    // 刷新该页数据
    refreshData () {
      this.initPage()
    },
    /**
     * 获取统计数据
     */
    getCountInfo () {
      dataApi.CountInfo().then((res) => {
        console.log(res)
        this.countInfo = res.data.data
      })
    },
    isLicenseUploadedChange (val) {
      switch (val) {
        case -1:
          this.isLicenseUploaded = ''
          break
        case 0:
          this.isLicenseUploaded = false
          break
        case 1:
          this.isLicenseUploaded = true
          break
      }
    },
    isContractUploadedChange (val) {
      switch (val) {
        case -1:
          this.isContractUploaded = ''
          break
        case 0:
          this.isContractUploaded = false
          break
        case 1:
          this.isContractUploaded = true
          break
      }
    },
    /**
     * 获取列表
     */
    getListData (due) {
      this.loading = true
      dataApi.postCustomerList({
        ContractWillBeExpiredDays: this.contractWillBeExpiredDays,
        Name: this.name,
        CooperateStatus: this.cooperateStatus,
        CooperateType: this.cooperateType,
        CityId: this.areaName[this.areaName.length - 1],
        ServerId: this.serverId,
        IsLicenseUploaded: this.isLicenseUploaded,
        IsContractUploaded: this.isContractUploaded,
        PageIndex: this.pageIndex,
        PageSize: this.pageSize,
        AreaName: this.filtrate.areaName
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data
          this.totalRows = res.data.totalRows
          this.cooperatingCount = res.data.cooperatingCount
          this.stopedCount = res.data.stopedCount
          this.behring = res.data.behring
          this.feeAmt = res.data.feeAmt
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
        this.loading = false
      })
    },
    /**
     * table 选择
     * @param {Objcet} selection 返回当前已选择的所有数据
     */
    onSelectChange (value) {
      console.log(value)
      let arr_id = []
      let arr_name = []
      value.map((item) => {
        arr_id.push(item.id)
        arr_name.push(item.name)
      })
      this.customerIds = arr_id.join(',')
      this.customerNames = arr_name.join('；')
    },

    // 获取申报单位下拉
    getUnitList () {
      dataApi.getUnitList({
        id: this.$store.state.user.companyID
      }).then(res => {
        this.unitList = res.data.data
        let arr = this.unitList.find(item => {
          return item.isDefault
        })
        this.unitId = arr.id
        console.log(this.unitId)
      })
    },

    /**
     * unitDepartureClick 打开单位调离
     */
    unitDepartureClick () {
      if (this.customerIds.length) {
        this.unitDepartureModalShow = true
      } else {
        this.$Message.warning('请选择需要调离的客户')
      }
    },
    // 终止合作模态窗
    openStopCooperate (id) {
      this.stopCooperateModalShow = true
      this.handleId = id
    },
    // 恢复合作模态窗
    openResumeCooperate (id) {
      this.resumeCooperateModalShow = true
      this.handleId = id
      if (this.contractCode) {
        return false
      } else {
        dataApi.getDefaultContractNo().then(res => {
          this.contractCode = res.data.data
        })
      }
    },
    
    /**
     * 分页
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.pageIndex = val
      this.getListData()
    },
    /**
     * 分页页码变动
     */
    onpageSizeChange (val) {
      this.pageIndex = 1
      this.pageSize = val
      this.getListData()
    },
    /**
     * 查询 按钮
     */
    query () {
      this.pageIndex = 1
      this.getListData()
    },
    /**
     * 打开新增
     */
    creatOpen () {
      this.createModalShow = true
    },

    // 对应下拉数据  20210107
    getSelectIdListSigningCompany () {
      dataApi.GetSelectIdList({
        type: 'SigningCompany'
      }).then(res => {
        console.log(res.data.data)
        this.signingCompany_arr = res.data.data
      })
    }, 
    getSelectIdListDepartment () {
      dataApi.GetSelectIdList({
        type: 'Department'
      }).then(res => {
        console.log(res.data.data)
        this.department_arr = res.data.data
      })
    }, 
    getSelectIdListRegion () {
      dataApi.GetSelectIdList({
        type: 'Region'
      }).then(res => {
        console.log(res.data.data)
        this.region_arr = res.data.data
      })
    }, 
    getSelectIdListSales () {
      dataApi.GetSelectIdList({
        type: 'Sales'
      }).then(res => {
        console.log(res.data.data)
        this.sales_arr = res.data.data
      })
    }, 
    /**
     * 数据字典
     */
    getEnum () {
      let groupNames = 'customer.type,customer.status,customer.category,customer.character,customer.taxpayertype,customer.invoicetype,customer.size,customer.companytype,customer.businesstype,customer.socso,customer.cfc,customer.ci,customer.servicefee'
      dataApi.getEnum({
        groupName: groupNames
      }).then((res) => {
        this.cooperateType_arr = this.getItems(res.data, 'customer.type')
        this.cooperateStatuseType_arr = this.getItems(res.data, 'customer.status')
        this.customerCategory_arr = this.getItems(res.data, 'customer.category')
        this.customerCharacter_arr = this.getItems(res.data, 'customer.character')

        this.customerTaxpayertype_arr = this.getItems(res.data, 'customer.taxpayertype')
        this.invoicetype_arr = this.getItems(res.data, 'customer.invoicetype')
        this.size_arr = this.getItems(res.data, 'customer.size')
        this.companytype_arr = this.getItems(res.data, 'customer.companytype')
        this.businesstype_arr = this.getItems(res.data, 'customer.businesstype')

        this.customerSocso_arr = this.getItems(res.data, 'customer.socso')
        this.customerCfc_arr = this.getItems(res.data, 'customer.cfc')
        this.customerCi_arr = this.getItems(res.data, 'customer.ci')
        this.customerServicefee_arr = this.getItems(res.data, 'customer.servicefee')
      })
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    },
    /**
     * 分级查询地区
     */
    loadDataCity (val, callback) {
      val.loading = true
      if (val.levelID === 2) {
        dataApi.getCity({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.id,
              children: [],
              loading: false
            }
          })
          val.loading = false
          callback()
        })
      } else {
        dataApi.getArea({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return { ...item, label: item.name, value: item.id }
          })
          val.loading = false
          callback()
        })
      }
    },
    /**
     * 查询所有省
     */
    getProvince () {
      dataApi.getProvince().then(res => {
        this.areaArr = res.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id,
            children: [],
            loading: false
          }
        })
      })
    },
    /**
     * server所属客服下拉数据
     */
    serverDown () {
      let data = {
        pageIndex: 1,
        pageSize: 1000
      }
      dataApi.postServers(data).then(res => {
        this.serverId_arr = res.data[0].items
      })
    },
    /**
     * 去往花名册
     */
    goEmployeeBookList (row) {
      var currentCustomerManage = {
        companyId: row.id,
        typeValue: row.typeValue
      }
      localStorage.setItem('currentCustomerManage', JSON.stringify(currentCustomerManage))
      this.$router.push({
        path: '/EmployeeBook',
        name: 'EmployeeBook',
        query: {
          companyId: row.id,
          companyName: row.name,
          typeValue: row.typeValue
        }
      })
    },
    /**
     * 查看详情
     */
    gotoDetail (id) {
      this.$router.push({
        path: '/CustomerInformationDetail',
        name: 'CustomerInformationDetail',
        query: {
          companyId: id
        }
      })
    },
    /**
     * 导出客户
     */
    exportCustomers () {
      dataApi.ExportCustomers({
        Name: this.name,
        CooperateStatus: this.cooperateStatus,
        CooperateType: this.cooperateType,
        CityId: this.areaName[this.areaName.length - 1],
        ServerId: this.serverId,
        IsLicenseUploaded: this.isLicenseUploaded,
        IsContractUploaded: this.isContractUploaded,
        ContractWillBeExpiredMonths: this.contractWillBeExpiredDays,
        Guids: this.customerIds.split(',')
      }).then(res => {
        if (res.data.success) {
          let fileName = ''
          const link = document.createElement('a')
          link.download = fileName
          link.href = res.data.message
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 打开二维码弹窗
    handleShowErweimaModal (row) {
      this.$refs.ErweimaModal.getTemplateList(row.id)
      this.$refs.ErweimaModal.show(row)
    }
  }
}
</script>
<style lang="less">
  .ss-add-modal-lzw{
    .ivu-modal-wrap{
      top:5%;
      bottom: 5%;
      left: 5%;
      right: 5%;
    }
    .ivu-poptip-rel{
      width: 100%;
    }
    .ivu-select-disabled .ivu-select-selection{
      color: #333;
    }
    .ivu-input[disabled]{
      color: #333;
    }
  }
</style>
<style lang="less" scope>
  .CustomerInformation{
    ._table{
      padding: 10px;
    }
    // /deep/ .ivu-checkbox-inner{
    //   border-radius: none;
    // }
    ._search{
      margin: 0 10px;
    }
    ._table{
      Button{
        margin-left: 5px;
      }
      ._button{
        float: right;
        button{
          margin-left: 10px;
          font-weight: none;
          font-size: 12px;
        }
      }
      // 表格底部分页样式
      ._table_footer{
        padding-right: 20px;
        padding-left: 20px;
        ._page{
          float: right;
        }
      }
      // 表格头部样式
      ._table_header{
        padding: 0 20px;
        .leftText{
          display: inline-block;
          padding: 0 5px;
          // margin-right: 20px;
          font-size: 14px;
          line-height: 70px;
        }
      }
    }
  }
  span.red{
    color: #ed4014;
    margin-right: 5px;
  }
</style>
